<%--<!DOCTYPE html>--%>
<%@ page language="java" contentType="text/html; charset=utf-8"
         pageEncoding="utf-8"%>
<!DOCTYPE html>
<html lang="en">
<head>
    <title>websocket</title>
    <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.min.js"></script>
    <script src="http://cdn.bootcss.com/stomp.js/2.3.3/stomp.min.js"></script>
    <script src="/assets/blog.js"></script>
    <script src="https://cdn.bootcss.com/sockjs-client/1.1.4/sockjs.min.js"></script>
    <script src="/assets/jquery.min.js"></script>
    <link rel="stylesheet" href="/static/layui/css/layui.css">
    <script src="${pageContext.request.contextPath }/static/layui/layui.js" charset="UTF-8"></script>
</head>
<body>
<div class="layui-row layui-col-space1" style="width: 70%;height: 600px;margin-left: 15%;">
    <div class="layui-col-md3 " id="friends" style="background-color: darkcyan; height: 100%;">

    </div>
    <div class="layui-col-md9 " style="height: 100%;border-top:1px solid #000;">
        <div id="top" style="height: 5%;background-color: darkcyan;text-align: center;">
            <h1 id="topname" style="color: white;"></h1>
        </div>
        <div id="info" style="height: 65%;margin: 5px;overflow:auto">
        </div>
        <div id="toolbar" style="height: 5%;text-align: center;">
        </div>
        <div id="text" style="height: 20%;">
                <textarea id="infotext" style="height: 80%;width: 100%;
                resize: none;
                cursor: pointer;"></textarea>
            <div style="height: 20%;padding: 5px;"><button id="sendinfo" value="1" class="layui-btn">发送</button></div>
        </div>
    </div>

</div>
</body>

<script>
    $('#sendinfo').click(function() {
        send()
    })
</script>

<script type="text/javascript">
    var flist = new Array();
    var webSocket;
    var commWebSocket;
    console.log(window)
    if ("WebSocket" in window) {
        webSocket = new WebSocket("ws://localhost:8090/websocket/" + getParams("id"));

        //连通之后的回调事件
        webSocket.onopen = function() {
            //webSocket.send( document.getElementById('username').value+"已经上线了");
            console.log("已经连通了websocket");
        };

        //接收后台服务端的消息
        webSocket.onmessage = function(evt) {
            var received_msg = evt.data;
            var obj = JSON.parse(received_msg);
            //普通消息
            if (obj.messageType == 2) {
                if (obj.fromusername == $("#sendinfo").attr('value')) {
                    html = '<div style="padding: 15px;background-color: darkcyan;border-radius: 10px;width:auto; display:inline-block !important; display:inline;color:white;">' + obj.textMessage + '</div><br><br>'
                    $("#info").append(html);

                    $("#info").animate({
                        scrollTop: $("#info").prop("scrollHeight")
                    }, 400); //0.4秒内滚到底部
                } else {
                    var state = 0;
                    $(".f_item").each(function() {
                        if ($(this).attr('value') == obj.fromusername) {
                            $(this).find('.layui-badge-dot').css("display", "block")
                            state = 1;
                        }
                    })
                    if (state = 0) {
                        //说明之前没有聊过天 ，再将改人的信息加入聊天栏中，需要访问account的接口获取用户数据
                    }
                }
            }
        };

        //连接关闭的回调事件
        webSocket.onclose = function() {
            console.log("连接已关闭...");
        };
    } else {
        // 浏览器不支持 WebSocket
        alert("您的浏览器不支持 WebSocket!");
    }

    //发送消息
    function send() {
        var selectText = $("#infotext").val();
        var message = {
            "message": selectText,
            "to": $('#sendinfo').attr('value'),
            "from": getParams("id")
        }
        webSocket.send(JSON.stringify(message));
        $("#infotext").val("");
        html = '<div style=" word-break: break-all;word-wrap: break-word;float:right;padding: 15px;background-color: darkcyan;border-radius: 10px;width:auto; display:inline-block !important; display:inline;color:white;">' + selectText + '</div><br><br><br><br>'
        $("#info").append(html);
        //滚动条到最低部
        $("#info").animate({
            scrollTop: $("#info").prop("scrollHeight")
        }, 400); //0.4秒内滚到底部
    }

    function getParams() {

    }
</script>

</html>